<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/videoDetail.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/vue-v2.6.10.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>

<body>
    <div id="app">
        <!-- 导航菜单 -->
        <nav>
            <div class="main">
                <img src="../img/public/logo.png" alt="" class="logo">
                <ul>
                    <li><a href="../index.html">首页</a></li>
                    <li class="check"><a href="online.html">全部课程</a></li>
                    <li><a href="javascript:;">在线练习</a></li>
                    <li><a href="javascript:;">精品课程</a></li>
                </ul>
                <div class="search">
                    <div class="left">课程<i class="iconfont icon-down"></i>
                    </div>
                    <input type="text" placeholder="搜索感兴趣的内容">
                    <img src="../img/public/search.png" alt="">
                </div>

                <div class="login" v-if="status">
                    <a href="./loginAndRegister/login.html">登陆</a>
                    /
                    <a href="./loginAndRegister/register.html">注册</a>
                </div>
                <div class="user" v-else="status">
                    <img src="../img/login/user.png" alt="">
                    <div class="userlist">
                        <ul>
                            <li>{{user.name}}</li>
                            <a href="../pages/course.html">
                                <li>课程中心</li>
                            </a>
                            <li>订单中心</li>
                            <li>资金管理</li>
                            <li>个人中心</li>
                            <li class="out">退出登陆</li>
                        </ul>
                    </div>
                </div>

            </div>
        </nav>
        <div class="all">
            <div class="crumbs">
                <span>首页</span>
                <span>></span>
                <span>同步课堂</span>
                <span>></span>
                <span>视频详情</span>
            </div>
        </div>
        <!-- 主体内容 -->
        <main>
            <div class="classDetail">
                <div class="left">
                    <video :src="'http://192.168.194.223:8080/cs_res/course/video/'+course.courseVideo" controls></video>
                </div>
                <div class="right">
                    <p class="title">{{course.courseName}}</p>
                    <ul>
                        <li>课程名称:{{course.courseName}}</li>
                        <li>发布日期:{{course.createTime}}</li>
                        <li>开课时间:2020-03-20</li>

                        <li>距报名截止仅剩</li>
                        <li>
                            <span>142</span>天
                            <span>23</span>时
                            <span>32</span>分
                            <span>45</span>秒
                        </li>
                        <li class="price" v-if="isBuy">
                            <span v-text="`￥${parseFloat(course.coursePrice).toFixed(0)}`"></span>
                            <span><a :href="'videoPlay.html?'+course.cid">课程学习</a></span>
                        </li>
                        <li class="sale" v-else="isBuy">
                            <span v-text="`个人￥${parseFloat(course.coursePrice).toFixed(0)}`"
                                @click="pay(course.coursePrice,course.courseName)"></span>
                            <span v-text="`拼团￥${parseFloat(course.coursePrice*0.8).toFixed(0)}`"
                                @click="pay(course.coursePrice*0.8,course.courseName)"></span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- <div class="classDetail">
                <div class="left">
                    <video src="../video/05_tabbar.mp4" controls></video>
                </div>
                <div class="right">
                    <p class="title">Java基础</p>
                    <ul>
                        <li>课程名称:Java基础</li>
                        <li>发布日期:2020-03-08</li>
                        <li>开课时间:2020-03-20</li>

                        <li>距报名截止仅剩</li>
                        <li>
                            <span>142</span>天
                            <span>23</span>时
                            <span>32</span>分
                            <span>45</span>秒
                        </li>
                        <li class="price">
                            <span>¥998</span>
                            <span><a href="../pages/videoPlay.html">课程学习</a></span>
                        </li>
                        <li class="sale">
                            <span>个人¥998</span>
                            <span>拼团¥790</span>
                        </li>
                    </ul>
                </div>
            </div> -->

            <div class="row title">
                <span :class="{active:foot}" @click="change">课程目录</span>
                <span :class="{active:!foot}" @click="change">课程详情</span>
            </div>
            <div class="classlist active" v-if="foot">
                <div class="content">
                    <div class="detail" v-for="(value,key) in courseList">
                        <p class="title">{{key}}</p>
                        <ul class="active">
                            <li v-for="c in value">
                                <p>
                                    <i class="iconfont icon-bofang"></i>
                                    <span>{{c.name}}</span>
                                </p>
                                <p>
                                    <span>{{c.start_data}}开播</span>
                                    <span class="start">播放视频</span>
                                </p>
                            </li>
                        </ul>
                        <!-- <ul class="active">
                            <li>
                                <p>
                                    <i class="iconfont icon-bofang"></i>
                                    <span>java如何发家一</span>
                                </p>
                                <p>
                                    <span>2020-03-20开播</span>
                                    <span class="start">播放视频</span>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <i class="iconfont icon-bofang"></i>
                                    <span>java如何发家二</span>
                                </p>
                                <p>
                                    <span>2020-03-21开播</span>
                                    <span class="start">播放视频</span>
                                </p>
                            </li>
                        </ul> -->
                    </div>
                </div>
                <div class="bottom">
                    <span class="seeAll">小优课堂开课啦</span>
                </div>
            </div>
            <div class="classlist" v-else="foot">
                <img src="../img/videoDetail/detail.png" alt="">
            </div>
        </main>

        <footer>
            <div class="cont">
                <div class="main">
                    <p>
                        首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 |
                        营业执照
                        | 教师资格证公示
                    </p>
                    <p>
                        京ICP备10218183号-1 京ICP证161188号 七易时代科技有限公司 | 地址：北京市昌平区慧聪采购园 | 电话：010-66666666 | 京公网安备
                        01010102002533号
                    </p>
                    <p>
                        京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    </p>
                    <p>在线教育许可证：小优课堂经营许可证20188008号 | 互联网教育服务资格证书：(京)-经营性-2018-0011 |</p>
                </div>
            </div>
        </footer>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            isBuy:false,
            foot: true,
            status: true,
            user: {
                uid:''
            },
            course: '',
            courseList: ''
        },
        methods: {
            change() {
                this.foot = !this.foot;
            },

            pay(price, subject) {
                if (!this.status) {
                    location.href = "http://192.168.194.223:8080/edu/pay?flag=pay&id=" 
                    + Date.now() + "&amount=" + price + "&subject=" + subject+"&uid="+this.user.uid+"&cid="+location.href.split("?")[1];
                }else{
                    location.href="loginAndRegister/login.html";
                }
            },

            initUser() {
                var u = sessionStorage.getItem("user");
                if (u == null || u == '') {
                    this.status = true;
                } else {
                    this.user = JSON.parse(u);
                    this.status = false;
                }
            },
            initCourse() {
                var cid = location.href.split("?")[1];
                axios({
                    method: "post",
                    url: 'http://192.168.194.223:8080/edu/course',
                    params: {
                        flag: 'getCourseInfo',
                        cid: cid
                    }
                }).then(res => {
                    this.course = res.data;
                });
                axios({
                    method: "post",
                    url: 'http://192.168.194.223:8080/edu/courseDetail',
                    params: {
                        flag: 'getCourseInfo',
                        cid: cid
                    }
                }).then(res => {
                    this.courseList = res.data;
                });
                axios({
                    method: "post",
                    url: 'http://192.168.194.223:8080/edu/userCourse',
                    params: {
                        flag: 'haveBuy',
                        cid: cid,
                        uid:this.user.uid
                    }
                }).then(res => {
                    this.isBuy=res.data;
                });
            }
        },
        computed: {
        },
        created() {
            this.initUser();
            this.initCourse();
        }

    })
</script>

</html>